<template>
  <div class="head">
    <img :src="`http://localhost:3000${info.head}`" alt />
    <input type="file" name="file" id="exampleInputFile" ref="upData" v-on:change="getBase($event)" />
    <div class="text">
      <p>{{info.name}}</p>
      <p>班级：{{info.class}}</p>
    </div>
    <i class="iconfont icon-15-fasong" @click="skip"></i>
  </div>
</template>

<script>
import { skip } from "ulit/skipRouter";
import { upData } from "request/upData";
import { upUser } from "request/useData";
import {upFile} from "ulit/upFile"
export default {
  name: "headDiv",
  props: ["info"],
  methods: {
    skip() {
      skip(this, "publish");
    },
    getBase() {
      var param=upFile(this.$refs.upData)
      upData(param).then((res) => {
        this.info.head=res.data.path
        upUser(this.info)
      });
    },
  },
};
</script>

<style lang="less" scoped>
.head {
  width: 100vw;
  height: 10rem;
  background-color: #673ab7;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 1rem;
  input {
    position: absolute;
    width: 5rem;
    height: 5rem;
    opacity: 0;
  }
  img {
    width: 5rem;
    height: 5rem;
    border: 2px solid #c3c1c1;
    border-radius: 50%;
  }
  .text {
    font-family: "Courier New", Courier, monospace;
    font-size: 1.1rem;
    color: #e6e6e6;
    margin-left: 1rem;
    p {
      margin-bottom: 3px;
    }
  }
  i {
    margin-left: 1rem;
    font-size: 2rem;
    color: #e6e6e6;
  }
}
</style>